<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script type="text/javascript" src="vue.js"></script>
    <script type="text/javascript" data-main="main" src="require.js"></script>
    <script type="text/javascript" src="http://libs.baidu.com/jquery/1.7.2/jquery.min.js"></script>
</head>
<body>
<div id="app">
    <zujian :info="items"></zujian>
    <br><br><br><br><br><br><br><br><br><br>
    <zujian :info="[{message:'oo' }]"></zujian>
</div>
<script type="text/javascript">
    jQuery(document).ready(function($) {
        require(['text!../requireHtml.vue'],function (data) {
            vueCompStart(data);
            vueStart();
        });
        function vueStart() {
            vm = new Vue({
                el:'#app',
                data:{
                    message:'hello',
                    items: [
                        {message: 'foo' },
                        {message: 'Bar' },
                        {message: 'Bar' },
                        {message: 'Br' },
                        {message: 'a' },
                        {message: 'ar' },
                        {message: 'Br' },
                        {message: 'Bar' },
                        {message: 'ar' },
                        {message: 'Br' },
                    ]
                }
            })
        }
        function vueCompStart(data) {
            Vue.component('zujian',{
                props:['info'],
                template:data,
                created:function () {
                    console.log(this);
                    console.log(this.$options);
                    for (var i = 0; i < this.info.length; i++) {
                        //console.log(this.info[i].message);
                    }
                }
            });
        }
    });
</script>
</body>
</html>